
import React, { Component, PropTypes } from 'react';

import './style.global.css';
import TransitionPortal from '../TransitionPortal';

export default class Snackbar extends Component {
    static propTypes = {
        show: PropTypes.bool.isRequired,
        text: PropTypes.string.isRequired,
        close: PropTypes.func.isRequired,
    };

    renderContent() {
        if (!this.props.show) {
            return false;
        }

        return (
            <div className="Snackbar">
                <div className="Snackbar-text">{this.props.text}</div>
                <div className="Snackbar-action" onClick={() => this.props.close()}>DONE</div>
            </div>
        );
    }

    render() {
        return (
            <TransitionPortal transitionEnterTimeout={0} transitionLeaveTimeout={150} transitionName="Snackbar">
                {this.renderContent()}
            </TransitionPortal>
        );
    }
}
